<template>
    <div class="editer">
        <div class="left">
            <draggable
                class="tag-group"
                ghost-class="ghost" 
                chosen-class="chosen"
                handle=".tag-group-item"
                animation="300"
                :list="tagList"
                :move="tagMove"
                :group="tagGroup"
                :sort="false"
                :clone="customClone"
                @end="tagEnd">
                <transition-group class="tag-group-row" tag="el-row" role="tag">
                    <el-col class="tag-group-col"
                        v-for="(item, index) in tagList"
                        :key="index" 
                        :span="12">
                        <div class="tag-group-item">
                            {{ item.name }}
                        </div>
                    </el-col>
                </transition-group>
            </draggable>
        </div>
        <div class="center">
            <el-form :model="form" disabled>
                <draggable
                    class="form-group"
                    ghost-class="ghost" 
                    chosen-class="chosen"
                    :list="formList"
                    :move="formMove"
                    handle=".drag-bar"
                    group="dfGroup"
                    animation="300" 
                    @end="formEnd">
                    <transition-group class="form-group-row" tag="el-row" role="form">
                        <template v-for="(item, index) in formList">
                            <el-col class="form-group-col" 
                                :class="{
                                    'is_active': item.id === currentId
                                }"
                                :key="index" 
                                @click.native.stop="formItemClick(item, index)"
                                v-bind="item.property ? item.property.col : {}">
                                <div class="form-group-item">
                                    <template v-if="item.property">
                                        <el-form-item v-if="item.property.widget === 'input'" :label="item.property.label">
                                            <el-input v-model="form.name" v-bind="item.property.ui"></el-input>
                                        </el-form-item>
                                        <el-form-item v-if="item.property.widget === 'select'" :label="item.property.label">
                                            <el-select v-model="form.name" v-bind="item.property.ui"></el-select>
                                        </el-form-item>
                                        <el-form-item v-if="item.property.widget === 'radio'" :label="item.property.label">
                                            <el-radio v-model="form.name" label="1">备选项</el-radio>
                                        </el-form-item>
                                        <el-form-item v-if="item.property.widget === 'checkbox'" :label="item.property.label">
                                            <el-checkbox v-model="form.name">备选项</el-checkbox>
                                        </el-form-item>
                                    </template>
                                    <div class="drag-bar">
                                        <FontIcon icon-name="el-icon-more"></FontIcon>
                                    </div>
                                </div>
                            </el-col>
                        </template>
                    </transition-group>
                </draggable>
            </el-form>
        </div>
        <div class="right">
            <DynamicForm v-if="currentItem" ref="sf" :schema="currentItem.schema" :formData="formData">
                <template v-slot:submit="scope">
                    <el-button type="primary" @click="submitForm(scope)">保存</el-button>
                </template>
            </DynamicForm>
        </div>
    </div>
</template>

<script>
import draggable from "vuedraggable";
let id = 0;
import { createSchema, objToProperty, inputSchema } from './schema';

export default {
    components: {
        draggable
    },
    data() {
        return {
            form: {},
            tagGroup: { 
                name: 'dfGroup', //分组名称
                pull: 'clone', //克隆
                put: false, //是否能拖入
            },
            tagList: [
                {widget: 'input', name: '输入框'},
                {widget: 'select', name: '选择框'},
                {widget: 'radio', name: '单选框'},
                {widget: 'checkbox', name: '复选框'},
            ],
            formList: [],
            moveWidget: null,
            currentId: null,
            temporaryId: null,
            schema: {
                properties: {}
            },
            formData: {},
        }
    },
    computed: {
        currentItem() {
            let item = this.formList.find(e => e.id === this.currentId)
            return item
        }
    },
    methods: {
        customClone(e) {
            const schema = createSchema(e.widget);
            let item = {
                ...e,
                id: ++id,
                schema: schema,
                property: objToProperty(e.widget, {}),
                formData: {}
            }
            this.temporaryId = item.id;
            return item
        },
        tagMove(e) {
            // console.log("Tag index: ", e);
        },
        tagEnd(e) {
            // console.log(e);
            if(this.formList.find(e => e.id === this.temporaryId)) {
                this.changeCurrentId(this.temporaryId)
            }
        },
        formMove(e) {
            // console.log("Form index: ", e.draggedContext.futureIndex);
        },
        formEnd(e) {
            console.log("Form end: ", e);
        },
        formItemClick(item, i) {
            this.changeCurrentId(item.id);
        },
        changeCurrentId(id) {
            const item = this.formList.find(e => e.id === id);
            this.currentId = id;
            this.formData = item ? item.formData : {}
        },
        submitForm(scope) {
            this.formList.forEach(v => {
                if(v.id === this.currentId) {
                    v.formData = this.$refs.sf.values;
                    v.property = objToProperty(v.widget, this.$refs.sf.values)
                }
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.editer{
    display: flex;
    .left{
        min-width: 200px;
        width: 200px;
        box-sizing: border-box;
        .tag-group{
            height: 100%;
        }
        .tag-group-row{
            height: 100%;
        }
        .tag-group-col{
            padding: 0 10px 10px;
            margin-top: 10px;
            border: 1px solid transparent;
        }
        .tag-group-item{
            border: 1px dashed #DCDFE6;
            text-align: center;
            border-radius: 4px;
            user-select: none;
            line-height: 32px;
            cursor: move;
        }
        .ghost{
            .tag-group-item{
                border-color: #67C23A;
            }
        }
        .chosen{
            .tag-group-item{
                border-color: #67C23A;
            }
        }
    }
    .center{
        flex: 1;
        border: 1px solid #DCDFE6;
        .form-group{
            .form-group-row{
                min-height: 400px;
            }
            .form-group-col{
                border: 1px solid transparent;
                &.is_active{
                    border-color: #0094ff;
                }
            }
            .form-group-item{
                position: relative;
                box-sizing: border-box;
                margin: 5px 10px;
                background-color: #F2F6FC;
                border-radius: 4px;
                padding: 10px;
                .drag-bar{
                    position: absolute;
                    top: 4px;
                    right: 4px;
                }
            }
            .ghost{
                &.form-group-col{
                    border-color: #67C23A;
                }
            }
            .chosen{
                &.form-group-col{
                    border-color: #67C23A;
                }
            }
        }
    }
    .right{
        min-width: 400px;
        width: 400px;
        height: 600px;
        overflow: auto;
    }
}
</style>